<template>
  <div class="postOrder container">
    <!-- back -->
    <van-nav-bar left-arrow title="下单详情" @click-left="$router.back()"></van-nav-bar>
    <!--  -->
    <scroller style="top:40px">
      <van-cell-group inset class="ReceiptInfoBig" v-if="addressList.length>0">
        <!-- 收货信息 -->
        <div class="ReceiptInfoTop">
          <span>收货人信息</span>
        </div>
        <van-cell
          @click="setCartAddress"
          :title="$store.state.address.receiverInfo.namePhone"
          :label="$store.state.address.receiverInfo.address"
          size="large"
          is-link
        />
      </van-cell-group>
      <van-cell-group inset class="optionAddressBig" @click="setCartAddress" v-else>
        <!-- 选择收获地址 -->
        <div class="optionAddress">
          <p>
            <van-icon name="location-o" />请选择默认收货地址
          </p>
          <van-icon name="arrow" />
        </div>
      </van-cell-group>
      <!-- 商品信息 -->
      <van-cell-group inset class="goodsINfo">
        <div class="goodsMain" :style="{overflow:isHide,height:isHeight}">
          <van-card
            v-for="v in goodsList"
            :key="v.id"
            :num="v.Num"
            :price="v.price.toFixed(2)"
            :desc="v.params[0]"
            :title="v.title"
            :thumb="v.src"
          />
          <!-- 展示更过 -->
        </div>
        <div class="goodsOver" v-show="isGoodsList" @click="setOverList">
          <van-icon name="arrow-down" v-if="isBtnArrow" />
          <van-icon name="arrow-up" v-else />
        </div>
      </van-cell-group>
      <!-- 商品邮费 -->
      <van-cell-group inset class="orderDiscount">
        <!-- 商品数量 -->
        <div class="GoodsNum">
          <p>
            商品清单:
            <span>共 {{this.goodsList.length}} 件商品</span>
          </p>
        </div>
        <!-- 优惠详情 -->
        <div class="Discount">
          <p>
            商品金额合计：
            <span>{{isPriceToFixed}}</span>
          </p>
          <p>
            优惠折扣：
            <span>{{DiscountPrice}}</span>
          </p>
          <p>
            运费：
            <span>包邮</span>
          </p>
          <p>
            应付金额：
            <span>{{DiscountPrice}}</span>
          </p>
        </div>
      </van-cell-group>
    </scroller>
    <!-- 提交订单 -->
    <van-submit-bar :price="finallyPriceAll" button-text="提交订单" @submit="onSubmit" />
    <!-- 地址 -->
    <keep-alive>
      <RightAnimate>
        <router-view class="animated" />
      </RightAnimate>
    </keep-alive>
  </div>
</template>

<script>
// shopINfo
import RightAnimate from '@/components/Animate/RightAnimate.vue'
import { mapState } from 'vuex'
export default {
  name: 'YscShopIndex',
  data () {
    return {
      goodsList: [],
      // 控制高度
      isHide: '',
      isHeight: '',
      isBtnArrow: true,
      // 折扣
      DiscountPrice: 0,
      // 商品总价钱
      finallyPriceAll: 0,
    };
  },
  created () {
    // 更新用户地址
    this.$store.commit('getAddressList')
    // 被选中的商品
    this.goodsList = this.$store.state.CartOrder.goodsCartList
    // 处理是否默认有收货人
    this.handelCity()

  },
  components: {
    RightAnimate
  },
  computed: {
    ...mapState(['addressList']),
    // 计算商品的数量是否展示更多
    isGoodsList () {
      const num = this.goodsList.length >= 3
      this.isHide = 'hidden'
      this.isHeight = '220px'
      if (num) return true
      return false
    },
    // 计算商品的总价钱
    isGoodsPrice () {
      return this.goodsList.filter(item => item.active).reduce((t, items) => t += Number(parseFloat(items.Num * items.price).toFixed(2).split('.').join('')), 0)
    },
    // 处理总价小数点
    isPriceToFixed () {
      const str = String(this.isGoodsPrice).split('');
      const num = str.length - 2
      str.splice(num, 0, '.');
      return str.join('')
    },
    // 商品总价钱
    finallyPrice () {
      const str = this.DiscountPrice.split('')
      const priceAll = []
      str.forEach(x => {
        if (x == '.') return
        priceAll.push(x)
      })
      return Number(priceAll.join(''))
    },
  },
  mounted () {
    this.DiscountPrice = this.isPriceToFixed
    const newDiscount = this.goodsList.filter(v => v.Discount != null).reduce((t, items) => t += items.Discount.price, 0)
    this.DiscountPrice -= newDiscount.toFixed('2')
    this.DiscountPrice = this.DiscountPrice.toFixed(2)
    // 商品总价钱
    this.finallyPriceAll = this.finallyPrice

    // 处理单个商品高
    if (this.goodsList.length == 1) {
      this.isHide = 'hidden'
      this.isHeight = '120px'
      this.isBtnArrow = true
    }
  },

  methods: {
    // 显示更多商品
    setOverList () {
      if (this.isBtnArrow) {
        this.isHide = 'initial'
        this.isHeight = 'auto'
        this.isBtnArrow = false
        return
      } else {
        this.isHide = 'hidden'
        this.isHeight = '220px'
        this.isBtnArrow = true
      }

    },
    // 提交订单
    onSubmit () { },
    // 地址
    setCartAddress () {
      // 从购物车进入编辑地址
      this.$store.commit('setPath', true)
      this.$router.push('/orderAddress')
    },
    // 地址加工
    handelCity () {
      // this.city.forEach(v => {
      //   if (v.isDefault == true) {
      //     this.defaultUserInfo.namePhone = v.name + ' ' + v.tel;
      //     this.defaultUserInfo.address = v.address
      //     return
      //   }
      // })
    }
  },
};
</script>

<style lang="less" scoped>
.animated {
  z-index: 101;
}
// 收货信息
.ReceiptInfoBig {
  height: 100px;
  margin-top: 10px;
  .ReceiptInfoTop {
    line-height: 30px;
    display: flex;
    justify-content: space-between;
    padding: 0px 18px;
    box-sizing: border-box;
    font-size: 14px;
    align-items: center;
    border-bottom: 0.5px solid #eee;
    span {
      font-size: 12px;
      // color: gray;
      font-weight: bold;
    }
  }
}
// 选择收获地址
.optionAddressBig {
  height: 50px;
  margin-top: 10px;
  .optionAddress {
    height: 50px;
    display: flex;
    justify-content: space-between;
    padding: 0px 10px;
    align-items: center;
    font-size: 14px;
  }
}
.goodsINfo {
  margin-top: 5px;
  overflow: initial;
  .goodsOver {
    width: 80px;
    line-height: 15px;
    background: #ddd;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -15px;
    z-index: 3;
    text-align: center;
    font-size: 12px;
    border-radius: 0px 0px 10px 10px;
  }
}
// 商品邮费
.orderDiscount {
  margin-top: 20px;
  font-size: 12px;
  .GoodsNum {
    font-weight: bold;
    line-height: 35px;
    padding-left: 15px;
  }
  .Discount {
    p {
      line-height: 30px;
      display: flex;
      justify-content: space-between;
      padding: 0px 15px;
      color: gray;
      span::before {
        content: "¥";
        font-size: 10px;
      }
    }
  }
}
// 商品卡片
.van-card {
  background-color: #fff;
  .van-card__price {
    color: #f96c2f;
  }
}
</style>
